<template>
  <div
    class="flex justify-center items-center h-screen bg-cyan-900 select-none"
  >
    <h1
      class="flex justify-center items-center text-xl"
      style="
        position: absolute;
        top: 10%;
        color: #000000;
        font-size: 50px;
        font-family: '黑体';
      "
    >
      人员信息管理系统
    </h1>
    <div
      class="w-96 h-[500px] bg-cyan-800 rounded-lg shadow-2xl text-slate-200 flex-col relative"
    >
      <div class="relative z-10">
        <div
          class="flex justify-center items-center rounded-full bg-blue-500 w-20 h-20 mx-auto mb-8 overflow-hidden"
          style="margin-top: 10px"
        >
          <!-- 在这里放置您的 logo 图片 -->

          <img
            src="https://img2.baidu.com/it/u=3313174208,293793537&fm=253&fmt=auto&app=138&f=JPEG?w=610&h=457"
            alt="Logo"
            class="w-12 h-12"
            style="width: 100%; height: 100%"
          />
        </div>
        <input
          type="text"
          v-model="FormUser.username"
          class="mx-auto mb-8 pb-2 w-60 outline-none border-b-2 bg-transparent block placeholder-slate-100"
          placeholder="账户"
        />
        <input
          type="password"
          v-model="FormUser.password"
          class="mx-auto mb-8 pb-2 w-60 outline-none border-b-2 bg-transparent block placeholder-slate-100"
          placeholder="密码"
        />
        <button
          class="mx-auto w-56 p-1.5 border text-xl border-slate-300 rounded-full block"
          id="submit"
          @click="LoginInfo"
        >
          登录
        </button>
        <div style="height: 5px"></div>
        <button
          class="mx-auto w-56 p-1.5 border text-xl border-slate-300 rounded-full block"
          id="submit"
          @click="zhuce"
        >
          注册
        </button>
      </div>
      <div
        class="mask absolute rounded-lg bg-orange-300 top-0 left-0 w-full h-full hidden"
        id="mask"
      ></div>
    </div>
    <el-dialog title="注册" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="FromList" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="FromList.name"></el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="FromList.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="FromList.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="FromList.openid"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="qd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { login } from "@/api/Login/index";
import axios from "axios";
export default {
  data() {
    return {
      dialogVisible: false,
      FormUser: {
        username: "",
        password: "",
      },
      FromList: {
        name: "",
        sex: "男",
        address: "",
        q: "",
        phone: "",
        memo: "",
      },
    };
  },
  methods: {
    async qd() {
      var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
      let nums = emailRegex.test(this.FromList.openid);
      if (!nums) {
        this.$message({
          message: "邮箱格式不对！",
          type: "error",
        });
      } else {
        console.log("nums", nums);
        let s1 = await axios.post(
          "http://127.0.0.1:8427/custom/adduser",
          this.FromList
        );

        console.log("111", s1);
        if (s1.data.data.username) {
          this.$message({
            message: "注册成功!",
            type: "success",
          });
          this.dialogVisible = false;
        } else {
          this.$message({
            message: "注册失败,用户名相同",
            type: "error",
          });
        }
      }
    },
    zhuce() {
      this.dialogVisible = true;
    },
    async LoginInfo() {
      const { data: res } = await login(this.FormUser);

      if (res.data.list.length == 1) {
        this.$message({
          message: "登录成功!",
          type: "success",
        });
        localStorage.setItem("openid", res.data.list[0].openid);
        this.$router.push({ name: "Home" });
      } else {
        this.$message({
          message: "登录失败!",
          type: "error",
        });
      }
    },
  },
};
</script>

<style>
</style>